<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>班级列表</title>
</head>


<body>
    
    <script>
        var body = document.body
        console.log(body);
        var table = document.createElement('table')
        body.appendChild(table);
        table.id = 'tab'

        var caption = document.createElement('caption')
        table.insertBefore(caption, table.firstChild);
        caption.innerHTML = '员工信息表'

        var tr = document.createElement('tr')
        table.insertBefore(tr, table.children[1]);

        var arr = ['操作', '年龄', '姓名', 'ID']
        for (var i = 0; i < 4; i++) {
            var td = document.createElement('td')
            tr.insertBefore(td, tr.firstChild);
            td.innerHTML = arr[i]
        }

        var hongLou = [[1001, '贾政', 45,'' ], [1002, '贾宝玉', 20, ''], [1002, '贾探春', 20, ''], [1003, '贾迎春', 20, ''], [1004, '贾惜春', 20, ''], [1005, '贾元春', 20, '']]

        for (var i = 0; i < hongLou.length; i++) {
            var tr = document.createElement('tr')
            table.appendChild(tr);
            
            for (var j = 0; j < hongLou[i].length; j++) {
                var td = document.createElement('td')
                tr.appendChild(td);
                
                if (j == 3) {
                    var a = document.createElement('a')
                    td.appendChild(a);
                    a.href = 'JavaScript:;'   // 阻止默认跳转
                    a.innerHTML = '删除'

                    a.onclick = function(){
                        this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)
                    }

                }else{
                    td.innerHTML = hongLou[i][j]
                }
            }
        }



    </script>
</body>

</html>